<template>
  <el-container style="height: 610px; border: 5px solid #eee">
    <user-aside @asideIndexChanged="asideIndexChanged"></user-aside>
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <user-header></user-header>
      </el-header>
      <user-infomation v-if="asideIndex == '1-1'"></user-infomation>
      <alter-user-infomation v-if="asideIndex == '1-2'"></alter-user-infomation>
      <user-month-salary v-if="asideIndex == '2-1'"></user-month-salary>
    </el-container>
  </el-container>
</template>

<script>
import UserHeader from "../components/UserHeader.vue";
import UserAside from "../components/UserAside.vue";
import UserInfomation from "../components/UserInformation.vue";
import AlterUserInfomation from "../components/AlterUserInformation.vue";
import UserMonthSalary from "../components/UserMonthSalary.vue";

export default {
  data() {
    return {
      username: "",
      asideIndex: "1-1"
    };
  },
  methods: {
    asideIndexChanged: function(selectIndex) {
      var _this = this;
      _this.asideIndex = selectIndex;
    }
  },
  mounted() {
    this.username = sessionStorage.getItem("username");
  },
  components: {
    UserHeader,
    UserAside,
    UserInfomation,
    AlterUserInfomation,
    UserMonthSalary
  }
};
</script>

<style>
</style>